---
title: "UI Responses"
description: "Learn how to make your AI show beautiful custom interfaces"
icon: "code"
---

## What's This About?

Instead of just showing text responses, your AI can display beautiful custom UIs like:
- Forms to collect information
- Charts and graphs
- Product cards
- Settings toggles
- And much more!

## Quick Example: Weather Display

Let's create a simple weather display UI. We'll build an AI that shows weather data in a nice card with a graph.

<Steps>
  <Step title="Create the Weather Action">
    1. Go to your dashboard
    2. Create a new action called `getTheWeather`
    3. Set it as a `GET` request
    4. Use this URL:
    ```
    https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&current=temperature_2m&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m
    ```
  </Step>

  <Step title="Add the Widget to Your App">
    Add this code to your React app:

    ```jsx
    import { CopilotWidget, Root } from "@openchatai/widget";
    import { WeatherDisplay } from "./WeatherDisplay";

    function App() {
      return (
        <div className="max-w-sm h-full">
          <Root
            options={{
              apiUrl: "https://api.opencopilot.so/backend",
              token: "YOUR_TOKEN",
              defaultOpen: true,
              initialMessage: "Hello",
              socketUrl: "https://api.opencopilot.so",
              components: [
                {
                  key: "getTheWeather",  // Must match your action name
                  component: WeatherDisplay,
                },
              ],
              language: "en",
            }}
          >
            <CopilotWidget />
          </Root>
        </div>
      );
    }

    export default App;
    ```
  </Step>

  <Step title="Create the Weather Display">
    Create a new file called `WeatherDisplay.tsx`:

    ```jsx
    import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
    import { ComponentProps } from "@openchatai/widget";
    import { ResponsiveLine } from "@nivo/line";

    // This matches the data from the weather API
    type WeatherData = {
      current: {
        temperature_2m: number;
        wind_speed_10m: number;
      };
      current_units: {
        temperature_2m: string;
        wind_speed_10m: string;
      };
      hourly: {
        time: string[];
        temperature_2m: number[];
        relative_humidity_2m: number[];
        wind_speed_10m: number[];
      };
    }

    export function WeatherDisplay(props: ComponentProps<WeatherData>) {
      const { data } = props;
      
      return (
        <Card className="p-3">
          <CardHeader>
            <CardTitle>
              {data.current.temperature_2m}°C
              Wind: {data.current.wind_speed_10m} km/h
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div style={{ height: "150px" }}>
              <ResponsiveLine
                data={[
                  {
                    id: "temperature",
                    data: data.hourly.time.map((time, i) => ({
                      x: time,
                      y: data.hourly.temperature_2m[i],
                    })),
                  }
                ]}
                margin={{ top: 20, right: 20, bottom: 40, left: 40 }}
                yScale={{ type: "linear" }}
                axisBottom={{ tickRotation: -45 }}
              />
            </div>
          </CardContent>
        </Card>
      );
    }
    ```
  </Step>
</Steps>

## How It Works

1. When someone asks about the weather, your AI calls the `getTheWeather` action
2. The action gets data from the weather API
3. Our widget finds the matching component (`WeatherDisplay`)
4. The component shows the weather data in a nice UI

That's it! Now when users ask about the weather, they'll see a beautiful card with current conditions and a temperature graph.

<Note>
Remember to:
- Match your component's `key` with your action name
- Make sure your component can handle the data structure from your action
- Use shadcn/ui components for consistent styling
</Note>

## What You Can Build

You can create UIs for many purposes:
- Product displays
- Booking forms
- Data visualizations
- Settings panels
- And much more!

Just create an action that returns the data you need, and a component to display it how you want.

Need help? check out more examples in our [GitHub repo](https://github.com/openchatai/widget).
